<template>
  <view class="homeBox">
    <view @click="toSearch" class="homeSearch">
      <search_input></search_input>
    </view>

    <scroll-view
      v-if="!loadStatus"
      scroll-y
      v-for="(item, index) in popularContent"
      :key="item.dId"
      style="margin-top: 15rpx"
    >
      <essay
        :index="index + 1"
        :content="item.dContent"
        :publisher="item.dUser.uName"
        :synopsis="n_format(item.dSupport)"
        :title="item.dTitle"
        @essay-click="toDetail(item.dId, index)"
      ></essay>
    </scroll-view>

    <!-- 初始化加载组件 -->
    <load :status="loadStatus"> </load>
  </view>
</template>

<script lang="ts" setup>
import search_input from '@/components/search_input/search_input.vue'
import essay from '@/components/essay/essay.vue'
import { reqPopularContent } from '@/api/dynamic'
import type { ResultPopularContent } from '@/config/data/result'
import { n_format } from '@/util/n_format'
import { DYNAMIC_DETAIL } from '@/config/constant/index'
import load from '@/components/load/load.vue'
import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onUnload,
  onPageScroll,
  onShareAppMessage,
} from '@dcloudio/uni-app'
import { ref } from 'vue'

//跳转搜索页面
const toSearch = () => {
  uni.navigateTo({
    url: '/subpkg/search/search',
  })
}

//跳转详情页面
const toDetail = (id: number, index: number) => {
  let key = DYNAMIC_DETAIL + id
  uni.setStorageSync(key, JSON.stringify(popularContent.value[index]))
  uni.navigateTo({
    url: `/subpkg/dynamic_detail/dynamic_detail?id=${key}`,
  })
}

//数据加载状态
const loadStatus = ref<boolean>(true)

//热门内容列表
const popularContent = ref<ResultPopularContent[]>([])

// 加载数据
const loadData = () => {
  reqPopularContent({ page: 1, size: 8, orderType: 'support' }).then((res) => {
    //如果res.data不为空
    if (res.data && res.data.length > 0) {
      popularContent.value.push(...(res.data as ResultPopularContent[]))
      //降序排列
      popularContent.value.sort((a, b) => b.dSupport - a.dSupport)
    }
    setTimeout(() => {
      loadStatus.value = false
    }, 200)
  })
}

const changePopup = () => {}

const popup = ref()

// 页面周期函数--监听页面加载
onLoad(() => {
  //加载数据
  loadData()
})
// 页面周期函数--监听页面初次渲染完成
onReady(() => {
  if (popup.value) {
    popup.value.open('center')
  }
})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {})
// 页面周期函数--监听页面隐藏
onHide(() => {})
// 页面周期函数--监听页面卸载
onUnload(() => {})

// 页面处理函数--监听用户下拉动作
// onPullDownRefresh() { uni.stopPullDownRefresh(); },
// 页面处理函数--监听用户上拉触底
// onReachBottom() {},
// 页面处理函数--监听页面滚动(not-nvue)
// onPageScroll(event) {},
// 页面处理函数--用户点击右上角分享
onShareAppMessage((options) => {
  return {
    title: '软星工坊',
    desc: '软星热门',
    path: '/pages/dynamic/dynamic', // 分享的目标路径，可以根据实际情况动态生成
    imageUrl: '', // 分享图片链接（仅支持网络图片）
    success: function () {
      // 分享成功的回调
    },
    fail: function () {
      // 分享失败的回调
    },
  }
})
</script>

<style scoped lang="scss">
.homeBox {
  position: relative;
  .homeSearch {
    margin: 20rpx 0;
  }
}
</style>
: any: any
